<template>
  <view class="task-dashboard">
    <view class="task-dashboard-navbar">
      <nut-navbar
        safe-area-inset-top
        :style="navbarStyle"
      >
        <template #left>
          <i
            style="font-size: 20px; color: #222"
            class="iconfont icon-fanhui"
            @click="goBack()"
          ></i>
        </template>
        <template #content>
          <view class="my-file-list-menu">
            <nut-menu>
              <template #icon>
                <i class="iconfont icon-daosanjiao"></i>
              </template>
              <nut-menu-item
                v-model="taskKanbanType"
                :options="state.options1"
                @change="onChange"
              />
            </nut-menu>
          </view>
        </template>
        <template #right> </template>
      </nut-navbar>
    </view>
    <view class="task-dashboard-content padding-top-navbar">
      <view class="task-dashboard-content-item">
        <view class="dashboard-con-title">
          <view class="con-title-box">
            <view class="dashboard-con-title-left">
              <view class="title-text"
                >任务进展看板</view>
              <view class="title-department">
                <img
                  src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01Lbl3DQ1S9wNWyZFit_!!1034622205.png"
                  alt=""
                />
                <nut-divider
                  direction="vertical"
                  :style="{ borderColor: '#101010' }"
                />
                <text> 技术部</text>
              </view>
              <view class="title-time">
                <text>数据更新至{{ taskTrends?.updatedTime }}</text>
                <i class="iconfont icon-shuaxin"></i>
              </view>
            </view>
            <view class="dashboard-con-title-right">
              <img
                src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN014TqKv91S9wNXwLpDh_!!1034622205.png"
                alt=""
              />
            </view>
          </view>
          <view class="dashboard-con-total">
            <view class="dashboard-total-box">
              <view class="dashboard-total-item">
                <text>{{ taskTrends?.overdueTaskCount }}</text>
                <text>已逾期</text>
              </view>
              <view class="dashboard-total-item">
                <text>{{ taskTrends?.ongoingTaskCount }}</text>
                <text>进行中</text>
              </view>
              <view class="dashboard-total-item">
                <text>{{ taskTrends?.completionRate }}%</text>
                <text>完成率</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="task-trends">
        <view class="task-trends-box">
          <view class="task-trends-title">
            <img
              src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01ucY3On1S9wNWRDmIa_!!1034622205.png"
              alt=""
            />
            <text>任务趋势</text>
          </view>
          <view class="task-trends-content">
            <!-- active1 active2 active3 不同状态的class-->
            <view
              class="task-trends-content-item"
              :class="
                taskTrends?.receivedCount > taskTrends?.ongoingTaskCount
                  ? ''
                  : taskTrends?.receivedCount < taskTrends?.ongoingTaskCount
                  ? 'active3'
                  : taskTrends?.completedTaskCount > taskTrends?.ongoingTaskCount
                  ? 'active1'
                  : 'active2'
              "
            >
              <view class="trends-content-toBegin">
                <text>待开始</text>
                <nut-divider
                  :style="{ borderColor: '#DADADA' }"
                  font-size="20rpx"
                />
                <view class="trends-content-toBegin-num">
                  <view class="triangle-up">待开始率 {{ taskTrends?.ongoingRate }}%</view>
                  <text class="triangle-up-num">{{ taskTrends?.receivedCount }}</text>
                  <view class="triangle-down"></view>
                  <text class="triangle-down-num">{{ taskTrends?.overdueRate }}%</text>
                </view>
              </view>
              <view class="trends-content-inProgress">
                <text>进行中</text>
                <nut-divider
                  :style="{ borderColor: '#DADADA' }"
                  font-size="20rpx"
                />
                <view class="trends-content-inProgress-num">
                  <text class="inProgress-num">{{ taskTrends?.ongoingTaskCount }}</text>
                  <view class="triangle-down"></view>
                  <text class="triangle-down-num">{{ taskTrends?.completionRate }}%</text>
                </view>
              </view>
              <view class="trends-content-completed">
                <text>已完成</text>
                <nut-divider
                  :style="{ borderColor: '#DADADA' }"
                  font-size="20rpx"
                />
                <view class="trends-content-completed-num">
                  <text>{{ taskTrends?.completedTaskCount }}</text>
                </view>
              </view>
            </view>
            <view class="task-trends-content-status">
              <view class="content-status-item">
                <view class="status-item-text">
                  <text></text>
                  <text>待开始</text>
                </view>
                <view class="status-item-text">
                  <text></text>
                  <text>进行中</text>
                </view>
                <view class="status-item-text">
                  <text></text>
                  <text>已完成</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="user-situation"
        v-if="taskKanbanType == 0"
      >
        <view class="user-situation-box">
          <view class="user-situation-title">
            <img
              src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01ucY3On1S9wNWRDmIa_!!1034622205.png"
              alt=""
            />
            <text>负责人情况 Top5</text>
          </view>
          <view class="user-situation-content">
            <ec-canvas
              id="mychart"
              canvas-id="mychart"
              ref="chartRef"
              :ec="ec"
            />
          </view>
        </view>
      </view>
      <view class="emergency-task-dashboard">
        <view class="emergency-task-dashboard-box">
          <view class="task-dashboard-title">
            <img
              src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN01ucY3On1S9wNWRDmIa_!!1034622205.png"
              alt=""
            />
            <text>紧急任务看板</text>
          </view>
          <view class="emergency-dashboard-content">
            <ec-canvas
              id="dashboardchart"
              canvas-id="dashboardchart"
              ref="dashboardchartRef"
              :ec="ecp"
            />
            <view class="emergency-dashboard-total">
              <view class="dashboard-total-item">
                <view class="dashboard-total-item-text">
                  <text>总任务</text>
                  <text>{{ urgentTask?.generalTaskCount ?? 0 }}</text>
                </view>
                <view class="dashboard-total-item-text">
                  <text>重要S级</text>
                  <text>{{ urgentTask?.importantLevelCountS ?? 0 }}</text>
                </view>
                <view class="dashboard-total-item-text">
                  <text>重要A级</text>
                  <text>{{ urgentTask?.importantLevelCountA ?? 0 }}</text>
                </view>
                <view class="dashboard-total-item-text">
                  <text>逾期</text>
                  <text>{{ urgentTask?.overdueTaskCount ?? 0 }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="logo-bottom">
        <img
          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01ROtCca1S9wNLeJ6zx_!!1034622205.png"
          alt=""
        />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { navigateTo, navigateBack } from "@tarojs/taro";
import Taro from "@tarojs/taro";
import { getNavbarInfo } from "@/utils/system";
import { appInfoStore } from "@/stores/appInfo";
import * as echarts from "@/libs/wechat/components/ec-canvas/echarts.min";
import { loadEcharts } from "echarts4taro3";
import {
  getTaskDepartmentBoardList,
  getTaskTaskSummaryList,
  getTaskEmergencyTaskBoard,
  getTaskAdmin,
  getTaskTeamList, //团队的总的
} from "@/api/index";
const navbarStyle = ref({});
// const userSituationList = reactive([
//   {
//     id: 1,
//     name: "技术部",
//     num1: 12,
//     num2: 88.66,
//     num3: 16.66,
//   },
//   {
//     id: 2,
//     name: "设计部",
//     num1: 12,
//     num2: 26,
//     num3: 62,
//   },
//   {
//     id: 3,
//     name: "运营部",
//     num1: 1,
//     num2: 6,
//     num3: 16.66,
//   },
//   {
//     id: 4,
//     name: "影视部",
//     num1: 11,
//     num2: 86,
//     num3: 16,
//   },
//   {
//     id: 5,
//     name: "招商部",
//     num1: 2,
//     num2: 8.66,
//     num3: 6.66,
//   },
// ]);
const state = reactive({
  options1: [
    { text: "团队任务", value: 0 },
    { text: "个人", value: 1 },
  ],
  value1: 0,
});
const taskTrends = ref(); // 任务趋势
const userSituationList = ref([]); // 负责人情况
const urgentTask = ref(); // 紧急任务
const teamData = ref(); // 团队任务看板
const taskKanbanType = ref(0); // 任务看板类型
const chartRef = ref<any>(null);
const dashboardchartRef = ref<any>(null);
const ec = ref({
  lazyLoad: false,
  onInit: async (canvas: any, width: number, height: number) => {
    // 1. 确保加载echarts
    if (taskKanbanType.value == 1) {
      await handleTaskTaskSummaryList();
    } else {
      await handleTaskTeamList();
    }
    await loadEcharts(echarts);
    let dataTitle = userSituationList.value.map((item: any) => item.deptName);
    let processingList = userSituationList.value.map((item: any) => item.processing);
    let completedList = userSituationList.value.map((item: any) => item.completed);
    let overdueList = userSituationList.value.map((item: any) => item.overdue);
    // 2. 使用小程序专用初始化方式
    const chart = echarts.init(canvas, null, {
      width,
      height,
      // devicePixelRatio: 2,
    });
    // 3. 必须设置canvas图表关联
    canvas.setChart(chart);
    // 4. 设置图表配置
    var option;
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        data: ["进行中", "已完成", "已延期"], // 这里显示series的name
        bottom: 0, // 图例放在底部
        itemGap: 30, // 图例项之间的间隔
        // 圆点大小
        itemWidth: 8,
        itemHeight: 8,
        itemStyle: {
          // 使用圆点作为图例标记
          borderRadius: 10,
          borderWidth: 0,
        },
        icon: "circle", // 设置图例图标为圆形
        textStyle: {
          padding: [0, 0, 0, 5], // 调整文字和图标的间距
        },
      },
      grid: {
        top: "10%",
        left: "3%",
        right: "4%",
        bottom: "10%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        data: dataTitle,
      },
      series: [
        {
          name: "进行中",
          type: "bar",
          stack: "total",
          barWidth: 15,
          showBackground: true,
          emphasis: {
            focus: "series",
          },
          data: processingList,
        },
        {
          name: "已完成",
          type: "bar",
          stack: "total",
          barWidth: 15,
          emphasis: {
            focus: "series",
          },
          data: completedList,
        },
        {
          name: "已延期",
          type: "bar",
          stack: "total",
          barWidth: 15,
          emphasis: {
            focus: "series",
          },
          data: overdueList,
        },
      ],
    };

    option && chart.setOption(option);
    return chart;
  },
});
const ecp = ref({
  onInit: async (canvas: any, width: number, height: number) => {
    // 1. 确保加载echarts
    if (taskKanbanType.value == 1) {
      await handleTaskEmergencyTaskBoard(); //紧急任务
    } else {
      await handleTaskTeamList();
    }
    await loadEcharts(echarts);
    // 2. 使用小程序专用初始化方式
    const chart = echarts.init(canvas, null, {
      width,
      height,
      devicePixelRatio: 2,
    });
    // 3. 必须设置canvas图表关联
    canvas.setChart(chart);
    // 4. 设置图表配置
    var option;
    option = {
      title: {},
      series: [
        {
          type: "pie",
          silent: true, // 禁用交互
          label: {
            show: true,
            position: "center",
            formatter: function (params) {
              return "{a|" + urgentTask.value?.completionRatio + "%}\n{b|完成比例}";
            },
            rich: {
              a: {
                fontSize: 24,
                fontWeight: "bold",
                color: "#333",
                lineHeight: 30,
              },
              b: {
                fontSize: 14,
                color: "#666",
                lineHeight: 20,
              },
            },
          },
          center: ["50%", "50%"],
          radius: ["50%", "70%"],
          startAngle: 180,
          avoidLabelOverlap: false,
          itemStyle: {
            borderWidth: 0,
            borderColor: "transparent",
          },
          data: [
            {
              name: "用量",
              value: urgentTask.value?.completionRatio, // 改为82.5%以匹配图片
              itemStyle: {
                color: "#1E74FD",
                // 使用阴影实现平滑的圆弧效果
                shadowColor: "#1E74FD",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderRadius: [20, 20, 20, 20], // 上左、上右圆角
              },
            },
            {
              name: "rest",
              value: 100 - urgentTask.value?.completionRatio, // 100-82.5
              itemStyle: {
                color: "#E2E7E6",
                // 使用阴影实现平滑的圆弧效果
                shadowColor: "#E2E7E6",
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                borderRadius: [0, 20, 0, 20], // 下右、下左圆角
              },
            },
            {
              name: "bottom",
              value: 100,
              itemStyle: {
                color: "transparent",
              },
            },
          ],
        },
      ],
    };
    option && chart.setOption(option);
    return chart;
  },
});
onMounted(async () => {
  // await handleTaskAdmin();
  await handleTaskTeamList();
  if (process.env.TARO_ENV === "weapp") {
    const { statusBarHeight } = getNavbarInfo();
    navbarStyle.value = {
      paddingTop: `${statusBarHeight}px`,
      //   height: `calc(44px + ${statusBarHeight}px)`,
    };
  }
});
//
const onChange = async (num: any) => {
  taskTrends.value = {};
  taskKanbanType.value = num;
  if (num == 0) {
    await handleTaskTeamList();
  } else if (num == 1) {
    await handleTaskDepartmentBoardList();
    await handleTaskTaskSummaryList();
    await handleTaskEmergencyTaskBoard();
  }
};

// 团队的任务看板数据
const handleTaskTeamList = async () => {
  taskTrends.value = urgentTask.value = teamData.value = {};
  userSituationList.value = [];
  await getTaskTeamList({ userId: Taro.getStorageSync("user").userId }).then(res => {
    teamData.value = res.data;
    userSituationList.value = res.data.taskLists;
    taskTrends.value = urgentTask.value = res.data; // 团队任务看板
  });
};
// 是否是管理员
const handleTaskAdmin = async () => {
  await getTaskAdmin({ userId: Taro.getStorageSync("user").userId }).then(res => {
    console.log(res, "rwessss");
  });
};
// 任务看板1
const handleTaskDepartmentBoardList = async () => {
  taskTrends.value = {};
  await getTaskDepartmentBoardList().then(res => {
    console.log(res, "res");
    taskTrends.value = res.data;
  });
};
// 任务看板2
const handleTaskTaskSummaryList = async () => {
  userSituationList.value = [];
  await getTaskTaskSummaryList().then(res => {
    userSituationList.value = res.data;
  });
};
// 任务看板3
const handleTaskEmergencyTaskBoard = async () => {
  urgentTask.value = {};
  await getTaskEmergencyTaskBoard().then(res => {
    console.log(res, "res2");
    urgentTask.value = res.data;
  });
};

const goBack = () => {
  navigateBack({
    delta: 1,
  });
};
</script>

<style lang="less">
@import "./index.less";
// @import url("../../../assets/css/index.css");
@import "@/assets/css/index.less";
</style>
